<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shiyanhu_1.png") ?>" alt="石燕湖基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shiyanhu_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shiyanhu_3.png") ?>" alt="自然生态环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;石燕湖公园是国家旅游局首批评定的 AAAA 级旅游景区、湖南省首家野生动物园、湖南百景、湖南省十大水体旅游景区、国内专业的拓展训练基地、国际赛龙舟基地、是长沙市最受欢迎的十佳旅游景区之一。</p>

                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 特色景点 1 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 石燕湖的自然奇观</h4>
                    <p class="text-gray-600">&emsp;&emsp;石燕湖有着独特的自然景观，湖水清澈见底，周围群山环绕。孩子们可以在这里感受大自然的神奇，观察各种动植物，了解生态平衡的重要性。</p>
                </div>
                <!-- 特色活动 1 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 水上探险活动</h4>
                    <p class="text-gray-600">&emsp;&emsp;在石燕湖可以开展丰富多彩的水上探险活动，如划船、皮划艇等。孩子们在活动中锻炼团队协作能力和应变能力，同时享受水上运动的乐趣。</p>
                </div>
                <!-- 特色活动 2 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 森林徒步之旅</h4>
                    <p class="text-gray-600">&emsp;&emsp;沿着石燕湖周边的森林小径徒步，孩子们可以呼吸新鲜的空气，聆听鸟儿的歌声。在徒步过程中，还能学习到关于森林生态、植物知识等。</p>
                </div>
                <!-- 特色活动 3 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">4. 野外生存技能培训</h4>
                    <p class="text-gray-600">&emsp;&emsp;基地会组织野外生存技能培训课程，教孩子们如何搭建帐篷、寻找水源、辨别方向等。通过这些培训，孩子们能够提高自己的生存能力和自我保护意识。</p>
                </div>
                <!-- 特色活动 4 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">5. 传统文化体验</h4>
                    <p class="text-gray-600">&emsp;&emsp;在石燕湖，孩子们可以体验传统的国学文化活动，如书法、绘画、茶艺等。通过这些活动，深入了解中国传统文化的博大精深。</p>
                </div>
                <!-- 特色活动 5 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">6. 团队拓展游戏</h4>
                    <p class="text-gray-600">&emsp;&emsp;开展各种团队拓展游戏，如拔河、接力赛等。这些游戏可以增强孩子们的团队凝聚力和合作精神，培养他们的竞争意识和责任感。</p>
                </div>
            </div>

            <!-- 石燕湖研学基地一日研学课程安排 -->
            
            <!-- 书堂山欧阳询文化产业园一日研学课程安排 -->
<div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【石燕湖一日研学课程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 15%;"> <!-- 时间列 -->
                <col style="width: 55%;"> <!-- 环节列 -->
                <col style="width: 30%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">9:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">抵达石燕湖研学</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>入园集合、上洗手间、清点人数</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">9:00 - 9:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">现场教学：绿色承诺 (感恩的心)</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>环保-环保之声、爱护环境</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">9:30 - 10:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">体验教学：勇闯－成长记【石燕湖天空玻璃廊桥】探秘【金龟岛】</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>素质-提升勇气，突破自我</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">10:00 - 10:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游船摆渡</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>素质-安全于一切</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">10:30 - 11:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">体验教学：沿湖游道、森林漫步</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>生物-环保教育，科技提倡</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">11:00 - 12:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">体验教学：快乐大脚板、科技体验</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>团队－感知团队协作、科技－感受科技魅力</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">12:00 - 13:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">午餐自理</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>勤俭节约，光盘行动</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">13:00 - 14:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">【丛林穿越】深入丛林，勇闯各种难易不同、风格曲异的关卡，感受树上攀爬与林间穿越的刺激</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>突破自我、磨练意志，培养勇往直前、积极向上的精神</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">14:00 - 15:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">【泡龙大作战】团队舞龙，协作，默契，配合。将创新和创意融入活动中，看一招一式，尽显团队风采</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>大型魔术表演《大魔术师》</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">15:00 - 16:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">【CS镭战】导师教授枪支操作，讲授作战规则，学员练习操作，扛上枪支，前往擂战场地PK(学生需替换其他项目)</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>提升学员勇气、培养团队成员之间的默契、激发潜能、提升智慧，培养学员遇到困难勇于突破的精神</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">16:00 - </td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">返程</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>清点人数、集合返程</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">小朋友们，石燕湖的奇妙之旅已经准备好啦！这里有文化、有游乐、有特色，每一个项目都超好玩、超有趣！快来石燕湖，一起开启这场超棒的研学冒险，收获满满的快乐和知识吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['知识性', '美观度', '体验感', '历史性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(153, 0, 51, 0.2)',
            borderColor: 'rgba(153, 0, 51, 1)',
            borderWidth: 2,
            data: [8, 7, 9, 6, 7] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>